<template>
    <div class="bg">
        <XHeader
            :left-options="{backText:''}"
            style="background-color: #55BEC1;"
            class="tabbar"
         >书籍详情
            <router-link :to="islogin?'/me':'/login'" class="rii" sort="right">
                <img :src="loginInf.avatar?'/api/images/avatar/'+loginInf.avatar:'/static/img/noavatarl.jpg'">
            </router-link>
           <router-link to="/" class="fa fa-home ri" sort="right"></router-link>
        </XHeader>
        <p style="margin:47px 0 0 0"></p>

        <div style="padding: 16px 16px 0 16px;background-color:white;border-bottom: solid 1px #ddd;">
            <div class="novel">
                <div><img :src="'/api/images/books/'+novelInfo.avatar"></div>
                <div class="novel-text">
                    <p class="novel-title">{{novelInfo.name}}</p>
                    <p style="display:flex;justify-content: space-between;">
                        <span>{{novelInfo.user}}</span>
                        <span class="novel-state">{{novelInfo.state}}</span>
                    </p>
                    <p>
                        <span>{{novelInfo.category}}</span>
                        &nbsp;|&nbsp;
                        <span>{{novelInfo.number|currency}}字</span>
                    </p>
                    <p>{{novelInfo.read|currency}}人在看</p>
                </div>
            </div>
            <div class="itembox">
                <router-link :to="'/catalog/'+novelInfo._id" style="background-color: #F7897E" class="aa">
                    <span>免费阅读</span>
                </router-link>
                <span class="aa" @touchstart="adduser" style="background-color: #55BEC1;">加入书架</span>
            </div>
            <div class="introduction" style="overflow:hidden;height:48px" v-show="!isopen">
                <span style="font-weight:bold;color:#444">简介：&emsp;</span>
                <span @touchstart="isopen=!isopen" class="bookint" >{{novelInfo.introduction}}</span>
            </div>
            <div @touchstart="isopen=!isopen" class="introduction" v-show="isopen">
                <span style="font-weight:bold;color:#444">简介：&emsp;</span>
                <span class="bookint af">{{novelInfo.introduction}}</span>
            </div>
            <div>
                <div class="catalog">
                    <span style="font-weight:bold;color:#444">最新：</span>
                    <span class="catalog-name">第20章</span>
                    <span style="position:absolute;right:5px">11-04</span>
                </div>
            </div>
            <router-link :to="'/catalog/'+novelInfo._id">
                <p style="margin:0;padding:16px 0;font-size:20px;color:#222">查看目录</p>
            </router-link>
           
        </div>
        
        <div class="reward">
            <div style="background-color:#FEF7F6;color:#F6818A">阅读<br><span>{{novelInfo.read}}次</span></div>
            <div style="background-color:#F6FCFC;color:#4BC2A3">推荐<br><span>12次</span></div>
            <div style="background-color:#FCFAF9;color:#C9998B">月票<br><span>3张</span></div>
        </div>

        <div class="gass">
            <span>猜你想看</span>
            <p v-for="(g,i) in gasss":key="i" @touchstart="changeBook(g._id)">{{g.name}}</p>
        </div>
        
        <div class="ping">
            <p style="margin:0 0 10px 0;font-weight:600;font-size:20px">最新评论</p>
            <div class="ping-con" v-for="(c,i) in comments" :key="i">
                <img :src="'/api/images/avatar/'+c.userAvatar">
                <div style="padding:16px 0 8px 50px;position:relative;flex-grow:1;border-top:solid 1px #ccc;">
                    <p class="ping-name">{{c.userName}}</p>
                    <span class="ping-text">{{c.text}}</span>
                    <div class="itembox1">
                        <span class="ping-time">{{c.time}}</span>
                        <div class="flex1"></div>
                        <span @touchstart="showRrply(i)" class="ping-hui">回复({{c.replies.length}})</span>
                    </div>
                    <div class="repliesList" v-show="index==i">
                        <div style="display:flex" v-for="(r,j) in c.replies">
                            <img :src="'/api/images/avatar/'+r.userAvatar">
                            <div style="position:relative;padding-top:10px;flex-grow:1">
                                <span class="replies-name">{{r.userName}}</span>
                                <span class="replies-text">{{r.text}}</span>
                                <p class="replies-time">{{r.time}}</p>
                            </div>
                        </div>
                        <textarea class="replies-in" v-model="repliesContent"></textarea>
                        <button @touchstart="setReplies(i)" class="replies-but">发表</button>
                    </div>
                </div>
            </div>
        </div>
        <p v-show="showAdd" class="more" @touchstart="addComments">显示更多...</p>
        
        <div class="textbox">
            <textarea class="shuru" v-model.trim="textContent"></textarea>
        </div>
        <button @touchstart="pubComment" :disabled="!islogin" class="huifu">发表评论</button>
        
        <div style="height:60px;background-color:#55BEC1;line-height:60px;font-size:15px">
            <span style="color:white">联系在线客服请关注公众号：</span>
            <span style="color:red">书海小说网</span>
        </div>

    </div>
</template>

<script>
    import { XHeader } from 'vux'
    import { mapState } from 'vuex'
    export default{
        data:function(){
            return {
                novelInfo:{},
                isopen:false,
                gasss:[],
                textContent:"",
                comments:[],
                allComment:[],
                num:0,
                showAdd:true,
                index:null,
                repliesContent:"",
            }
        },
        components:{
            XHeader
        },
        computed:{
            ...mapState([
                "loginInf",
                "islogin"
            ]),
        },
        methods:{
            changeBook:function(id){
                location.href = "/#/novel/"+id;
                location.reload();
            },
            adduser:function(){
                if(this.$store.state.islogin){
                    this.http.get("/api/users/addcollections",{params:{id:this.novelInfo._id}}).then(res=>{
                        if(!res.data.err){
                            this.$vux.alert.show({
                                title:res.data.msg
                            })
                        }
                    })
                }else{
                    this.$vux.alert.show({
                        title:"请先登录",
                        onHide(){
                            location.href = "/#/login"
                        }
                    })
                }
                
            },
            pubComment:function(){
                if(!this.islogin){
                    this.$vux.alert.show({
                        title:"请先登录",
                        onHide(){
                            location.href="/#/login"
                        }
                    })
                }else{
                    var userName = this.loginInf.name;
                    var userAvatar = this.loginInf.avatar;
                    var bookId = this.novelInfo._id;
                    var text = this.textContent;
                    // console.dir(userName)
                    // console.dir(userAvatar)
                    if(text==""){
                        this.$vux.alert.show({
                            title:"请输入内容"
                        })
                    }else{
                        this.http.post("/api/comment",{userAvatar,userName,bookId,text}).then(res=>{
                            if(!res.data.err){
                                this.$vux.alert.show({
                                    title:res.data.msg
                                })
                            };
                            this.comments.unshift(res.data.data);
                            //  console.dir(this.comments)
                            this.textContent = "";
                        })
                    }
                } 
            },
            addComments:function(){
                var a = this.num*6+6;
                if(this.allComment.length<=a){
                    a =this.allComment.length;
                    this.showAdd =false;
                }
                for(var i =this.num*6;i<a;i++){
                    this.comments.push(this.allComment[i]);
                }
                this.num++;
            },
            showRrply:function(i){
                if(this.index==i){
                    this.index =null;
                }else{
                    this.index = i;
                }
            },
            setReplies:function(i){
                if(!this.islogin){
                    this.$vux.alert.show({
                        title:"请先登录",
                        onHide(){
                            location.href="/#/login"
                        }
                    })
                }else{
                    var userName = this.loginInf.name;
                    var userAvatar = this.loginInf.avatar;
                    var commentID = this.comments[i]._id;
                    var text = this.repliesContent;
                    if(text==""){
                        this.$vux.alert.show({
                            title:"请输入内容"
                        })
                    }else{
                        this.http.post("/api/replies",{userAvatar,userName,commentID,text}).then(res=>{
                            if(!res.data.err){
                                this.$vux.alert.show({
                                    title:res.data.msg
                                })
                            };
                            this.comments[i].replies.push(res.data.data);
                            //  console.dir(this.comments)
                            this.repliesContent = "";
                        })
                    }
                } 
            }
        },
        mounted:function(){
            this.http.get("/api/booksId",{params:{id:this.$route.params.id}})
            .then(res=>{
                // console.dir(res.data)
                this.novelInfo = res.data.data;
                this.allComment = res.data.data.comments;
                var a =this.num*6+6;
                if(this.allComment.length<=6){
                    a = this.allComment.length;
                    this.showAdd =false;
                }
                for(var i = 0;i<a;i++){
                    this.comments.push(this.allComment[i]);
                }
                this.num++;
            });
            this.http.get("/api/hot",{params:{num:3}}).then(res=>{
                this.gasss = res.data.data;
            });
        }
    }
</script>

<style scoped>
    .tabbar{
        position: fixed;
        top: 0;
        z-index: 5;
        width: 100%;
    }
    .ri{
        position: absolute;
        right: 8px;
        font-size: 30px;
        top: 8px;
        color: white;
    }
    .rii{
        position: absolute;
        right: 45px;
        font-size: 20px;
        top: 9px;
        color: white;
    }
    .rii img{
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
    .novel{
        display: flex;     
    }
    .novel img{
        width: 80px;
        height: 110px;
    }
    .novel-text{
        flex-grow: 1;
        margin-left: 10px;
        text-align: left;
        font-size: 16px;
        width: 65%;
        color: #777;
    }
    .novel-text p{
        margin: 0;
        height: 25px;
    }
    .novel-title{
        font-weight: bold;
        color: #444;
        margin: 0 0 10px 0 !important;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .novel-state{
        line-height: 25px;
        padding: 0 10px;
        color: white;
        background-color: #F7897E;
        font-size: 12px;
    }
    .itembox{
        margin-top: 10px;
        font-size: 16px;
        color: white;
        display: flex;
        justify-content: space-between;
    }
    .aa{
        display: inline-block;
        width: 48%;
        padding: 8px 0;
    }
    .introduction{
        position: relative;
        margin-top: 15px;
        font-size: 14px;
        color: #666;
        text-align: left;
        line-height: 16px;
        /*border-bottom: solid 1px #ddd;*/
    }
    .bookint::after{
        content: "...展开";
        font-weight: normal;
        position: absolute;
        bottom: 0px;
        right: 0;
        padding: 0 0 0 15px;
        color: #55bec1;
        background: #fff;
    }
    .af::after{
        content: "...收起"
    }
    .catalog{
        position: relative;
        margin-top: 10px;
        height: 45px;
        text-align: left;
        font-size: 14px;
        color: #666;
        line-height: 45px;
        border-top: solid 1px #ddd;
        border-bottom: solid 1px #ddd;
    }
    .reward{
        background-color: white;
        margin-top: 15px;
        display: flex;
        justify-content: space-between;
        padding: 15px 20px;
    }
    .reward div{
        width: 32%;
        height: 80px;
        font-size: 20px;
        line-height: 60px;
    }
    .reward span{
        position: relative;
        top: -41px;
        font-size: 15px;
    }
    .gass{
        font-size: 20px;
        text-align: left;
        padding: 0 0 0 20px;
        background-color: white;
        margin: 20px 0;
    }
    .gass span{
        display: inline-block;
        line-height: 60px;
        color: #55bec1;
        height: 60px;
        border-bottom: solid 3px #55bec1;
    }
    .gass p{
        border-bottom: solid 1px #ddd;
        color: #222;
        margin: 0;
        height: 50px;
        line-height: 50px;
    }
    .gass p:nth-last-of-type(){
        border: none;
    }
    .ping{
        background-color: white;
        padding: 16px;
        text-align: left;
    }
    .ping-con{
        display: flex;
    }
    .ping-con img{
        margin-top: 20px;
        margin-left: 10px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }
    .ping-name{
        font-size: 19px;
        margin: 0;
        color: #222;
        font-weight: 500;
    }
    .ping-text{
        display: inline-block;
        margin-top: 5px;
        font-size: 15px;
        color: #666;
        height: 42px;
        white-space: normal;
        word-break: break-all;
    }
    .itembox1{
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: box;
    }
    .ping-time{
        font-size: 14px;
        color: #777;
    }
    .ping-hui{

        background-color: transparent;
        color: #55bec1;
    }
    .flex1{
        -moz-box-flex: 1;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        box-flex: 1;
    }
    .huifu{
        background-color: #398BFC;
        color: white;
        border: none;
        border-radius: 5px;
        padding: 5px 8px; 
    }
    .huifu:disabled{
        background-color: #999;
    }
    .shuru{
        width: 100%;
        height: 100px;
        border: solid 1px #5C9DFF;
    }
    .textbox{
        width: 92%;
        margin: 0 auto;
        background-color: #FAFAFA;
        padding: 20px 14px 14px 14px; 
    }
    .repliesList{
        background-color: #F7F8FA;
        font-size: 14px;
        padding: 4px 15px 14px 15px;
        overflow: hidden;
    }
    .repliesList img{
        width: 30px;
        height: 30px;
        margin: 6px 0;
        border-radius: 50%;
    }
    .replies-name{
        color: #5564CA;
        font-size: 16px;
    }
    .replies-text{
        font-size: 13px;
        color: #444;
    }
    .replies-time{
        text-align: right;
        margin: 0;
        font-size: 12px;
        color: #555;
    }
    .replies-in{
        width: 100%;
        border: solid 1px #D6DFFA;
        margin-top: 8px;
    }
    .replies-but{
        background-color: #5693F9;
        color: white;
        border-radius: 5px;
        float: right;
    }
</style>